<template>
	<view class="main">
		<!-- 用于头像以及收藏等 -->
		<view class="top">
			<view class="head" @click="toInformation()">
				<uni-list :border="false" >
					<view class="tou">
					<uni-list-item  :title="userInfo.nickName" note="普通用户" showArrow
						:thumb="userInfo.avatar" thumb-size="lg" link
						style="border-radius: 15rpx;"/>
				</view>
				</uni-list>
			</view>

		</view>
	<view class="body">
		    <view class="top_text">
				<view class="text">
					<uni-icons type="refresh" size="25" ></uni-icons>
					<text class="haoyou">历史</text>
				</view>
				<view class="text">
					<uni-icons type="personadd" size="25" ></uni-icons>
					<text class="haoyou">好友:3</text>
				</view>
				<view class="text">
					<uni-icons type="eye" size="25">

					</uni-icons><text class="shu">关注:3</text>
				</view>
				<view class="text">
					<uni-icons type="star" size="25">

					</uni-icons>
					<text>收藏:3</text>
				</view>
			</view>

		<!-- 用于个人资料以及社群 -->
		<view class="center">
			<uni-list >
				<uni-list-item :show-extra-icon="true" showArrow :extra-icon="OneIcon" title="个人资料" link class="list_item"
				style="height: 90rpx;"/>
				<uni-list-item :show-extra-icon="true" showArrow :extra-icon="twoIcon" title="我的社群" link class="list_item"
				style="height: 90rpx;"/>
			</uni-list>
		</view>


		<!-- 用于其他设置 -->
		<view class="bottom">
			<uni-list>
				<uni-list-item showArrow title="钱包" class="list_item" link :extra-icon="threeIcon" :show-extra-icon="true" @click="toPurse"
				 style="height: 90rpx;"/>
				<uni-list-item showArrow title="设置" class="list_item" link :extra-icon="fourIcon" :show-extra-icon="true"
				style="height: 90rpx;"/>
				<uni-list-item showArrow title="关于我们" class="list_item" link :extra-icon="fiveIcon" :show-extra-icon="true" @click="toUs"
				style="height: 90rpx;"/>
				<uni-list-item showArrow title="列表文字" class="list_item" link :extra-icon="sixIcon" :show-extra-icon="true"
				style="height: 90rpx;"/>
			</uni-list>
		</view>


	</view>
    </view>
</template>

<script>
	import {
		ref
	} from 'vue'
	export default {
		data() {
			return {
				show: false,

				OneIcon: {
					color: '#a7ee7a',
					size: '30',
					type: 'person-filled'
				},
				twoIcon: {
					color: '#a7ee7a',
					size: '30',
					type: 'staff-filled'
				},
				threeIcon:{
					color: '#b3b3b3',
					size: '20',

					type: 'wallet'
				},
				fourIcon:{
					color: '#b3b3b3',
					size: '20',
					type: 'gear'
				},
				fiveIcon:{
					color: '#b3b3b3',
					size: '20',
					type: 'paperplane-filled'
				},
				sixIcon:{
					color: '#b3b3b3',
					size: '30',
					type: 'staff-filled'
				},
				userInfo:null
			}
		},
		created(){

		},
		methods: {
			//钱包页面
			toPurse(){
				uni.navigateTo({
					url:"/pages/View/user/setting/purse"
				})
			},
			toPrivate() {
				uni.navigateTo({
					url: "/pages/View/user/private/private"
				})
			},
			toInformation() {
				uni.navigateTo({
					url: "/pages/View/user/information/information"
				})
			},
			toUs(){
				uni.navigateTo({
					url:'/pages/View/user/setting/aboutUs'
				})
			}
		},
		onLoad(){
			const userInfo=uni.getStorageSync('userInfo')
			this.userInfo=userInfo
		},
		onShow(){
			const userInfo=uni.getStorageSync('userInfo')
			this.userInfo=userInfo
		}
	}
</script>

<style>
	.main {
		/* position: absolute; */
		z-index: 1;
		width: 100%;
		height: 100%;
		background-color: #ebeef5;
	}
	.head{
		position: relative;
		width: 100%;
		height: 380rpx;
		background: linear-gradient(to top right,pink,lightblue);

	}
	.tou{
		margin-top: 220rpx;
                position: absolute;
		width: 90%;
		height: 150rpx;
		margin-left: 5%;
		border-radius: 15rpx;
	}

	.body{
		margin-top: 100rpx;
		width: 90%;
		/* height: 900rpx; */
		margin-left: 5%;
		/* background-color: aqua; */
	}

	.top {
		background-color: white;
		width: 100%;
		height: 300rpx;
		margin-top: 70rpx;
		/* border: 1rpx solid #e8e8e8; */
		margin-bottom: 40rpx;
		color: black;
	}


	.top_text {
		/* margin-top: 30rpx; */
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 120rpx;
		background-color: white;
		/* justify-content: space-around; */

	}

	.top_text>.text {
		padding: 15rpx;
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 30rpx;
		color: gray;
	}

/* 	.number {
		height: 50rpx;
		width: 100%;
		text-align: center;
		font-size: 35rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	} */

/* 	.flag {
		font-size: 28rpx;
		width: 100%;
		text-align: center;
		color: #a2a2a2;
	} */

	.center {
		/* background-color: black; */
		height: 210rpx;
		width: 100%;
		border: 1rpx solid #e8e8e8;
		/* margin-bottom: 40rpx; */
		padding: 0 ! important;
		margin-top: 30rpx;
		/* border-radius: 25rpx; */
	}

	.bottom {
		height: 40rpx;
		width: 100%;
		/* background-color: black; */
		/* margin-top: 20rpx; */
	}

	.list_item {
		height: 100rpx;
		font-weight: 600;
	}
</style>
